<template>
	<view class="flex resource">
		<view class="left">
			<dx-left-search :urls="groupUrls" @change="change"></dx-left-search>
		</view>
		<view class="right ml-15px dx-body">
			<dx-table ref="table" :header="tableHeader" :buttons="['refresh', 'add', 'del']" :tableParams="tableParams"> </dx-table>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick, provide } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { multiUpload } from '@/uni_modules/dx-admin/api/index';
const table = ref();
const group_id = ref('');
provide('onBeforeButton', function (type: string) {
	if (type === 'add') {
		// 拦截添加按钮
		uni.chooseFile({
			count: 1, //默认9,
			success: function (res: any) {
				multiUpload(res.tempFiles, { group_id: group_id.value }).then(() => {
					table.value.getTableList();
				});
			},
		});
		return false;
	}
});
provide('onBeforeIndex', function (params: any) {
	// 拦截列表请求
	params.group_id = group_id.value;
	return params;
});
const tableHeader = reactive({
	tips: '',
	searchField: 'type',
	searchOp: 'like',
	params: [
		{
			label: '全部',
			value: '',
		},
		{
			label: '图片',
			value: 'image',
		},
		{
			label: '视频',
			value: 'video',
		},
		{
			label: '音频',
			value: 'audio',
		},
		{
			label: '文本',
			value: 'text',
		},
		{
			label: '文档',
			value: 'doc',
		},
		{
			label: 'Excel',
			value: 'xls',
		},
		{
			label: 'PPT',
			value: 'ppt',
		},
		{
			label: 'PDF',
			value: 'pdf',
		},
		{
			label: '压缩包',
			value: ['zip', 'rar', '7z'],
		},
		{
			label: '其他',
			value: ['apk'],
		},
	],
});
const tableParams = reactive({
	columnConfig: {
		resizable: true,
	},
	rowConfig: {
		isCurrent: false,
		isHover: true,
		height: 55,
	},
	showOverflow: 'tooltip',
	urls: {
		index: 'resource/index',
		add: 'resource/add',
		edit: 'resource/edit',
		del: 'resource/del',
		multi: 'resource/multi',
	},
	columns: [
		{ type: 'checkbox', width: '60px', operator: false },
		{ type: 'seq', field: 'seq', label: '序号', width: '60px', operator: false },
		{
			label: '文件',
			field: 'url',
			operator: false,
			render: 'dx-image',
			width: '80px',
		},
		{
			label: '名称',
			field: 'file_name',
			form: false,
			minWidth: '150px',
		},
		{
			label: '类型',
			field: 'type',
			operator: false,
			form: false,
			width: '100px',
		},
		{
			label: '大小',
			field: 'file_size',
			form: false,
			minWidth: '100px',
			formatter({ cellValue }: any) {
				let val = cellValue / 1024;
				return val > 1024 ? `${(val / 1024).toFixed(2)}MB` : `${val.toFixed(2)}KB`;
			},
		},
		{
			label: '创建时间',
			field: 'create_date',
			form: false,
			formatter: 'dxFormatDate',
			minWidth: '180px',
		},
		{
			type: 'operate',
			field: 'operate',
			label: '操作',
			width: '80px',
			fixed: 'right',
			operator: false,
			buttons: ['del'],
			permission: ['dx-func-admin/resource/del'],
		},
	],
});

const groupUrls = reactive({
	add: 'resourceGroup/add',
	index: 'resourceGroup/list',
	edit: 'resourceGroup/edit',
	del: 'resourceGroup/del',
});

onLoad(() => {
	nextTick(() => {
		// 加载表单数据
		table.value.getTableList();
	});
});
function change(row: any) {
	group_id.value = row._id;
	table.value.getTableList();
}
</script>

<style lang="scss">
.resource {
	height: 100%;
	min-width: 800px;
}
.left {
	width: 240px;
	background-color: #ffffff;
}
.right {
	width: calc(100% - 240px);
	overflow-y: auto;
}
</style>
